<template>
	<div class="wrap" v-loading="loading">
		<div class="track"  v-for="item in tracks">
			<div class="track__time">
				<div class="track__time--month">
					{{new Date(item.time).getMonth()+1}}月
					{{new Date(item.time).getDate()}}日
				</div>
				<div class="track__time--year">
					{{new Date(item.time).getFullYear()}}年
				</div>
			</div>
			<div class="track__content" v-if="item.help">
				<div class="track__content--title">帮助了{{item.help.length}}个小伙伴</div>
				<div class="track__content--detail">
					<div class="help" v-for="item2 in item.help">
						<img :src="item2" alt="" />
					</div>
				</div>
			</div>
			<div class="track__content" v-else-if="item.goods">
				<div class="track__content--title">发布了{{item.goods.length}}件商品</div>
				<div class="track__content--detail" v-for="item2 in item.goods">
					<img :src="item2.img" alt="" class="goods-img"/>
					<div class="goods-description">
						<span>{{item2.title}}</span>
						<div class="goods-price">¥{{item2.price}}</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import { fetchUserInfoTrack } from "../../../../../api/api.js"
	export default {
		//商品处应该有字数限制
		data() {
			return {
				loading: true,
				tracks: null
			}
		},
		created() {
			this.getTracks();
		},
		methods: {
			getTracks() {
				this.loading = true;
				fetchUserInfoTrack().then( res => {
					this.loading = false;
					this.tracks = res.data.result;
				} ).catch( err => {
					alert(err);
					console.log(err)
				} );
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		min-height: rem(250);
	}
	.track {
		
		display: flex;
		padding: $com-padding-lr-base;
		border-bottom: 1px solid #ccc;
	}
	.track__time {
		text-align: center;
		margin-right: rem(20);
	}
	.track__time--month {
		font-size: $font-sm;
		font-weight: bold;
		white-space: nowrap;
	}
	.track__time--year {
		font-size: $font-xs;
		color: $gray;
		margin-top: rem(15);
	}
	.track__content {
		font-size: $font-sm;
	}
	.track__content--detail {
		margin-top: rem(10);
		display: flex;
		.help {
			margin-right: rem(10);
			@include round-header-small;
		}
		.goods-img {
			flex-shrink: 0;
			width: $track-img-width;
			height: $track-img-height;
		}
		.goods-description {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: rem(8);
			font-size: $font-xs;
			.goods-price {
				color: $color-money;
			}
		}
	}
</style>